<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>圣杯布局</title>
<style type="text/css">
    body{
        min-width: 700px;
    }
    .container{
        height: 300px;
        padding: 0 250px 0 200px;
    }
    .column{
        float: left;
        height: 300px;
    }
    .left{
        width: 200px;
        background-color: pink;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    .right{
        width: 250px;
        background-color:purple;
        margin-left: -250px;
        position: relative;
        right: -250px;
    }
    .main{
        width: 100%;
        background-color: orange;
        word-break: break-all; /*文字自动换行*/
        font-family: fantasy;
    }
    .logo{
        width: 140px;
        height: 60px;
        background: url("logo.png") no-repeat center;
    }
    .logo a {
        display: block;
        width: 100%;
        height: 100%;
        text-indent: -2000em;

    }
</style>
</head>
<body>
<div class="container">
<div class="column main">
    圣杯布局 圣杯布局 圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局
    圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局
    圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局
    圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布
</div>
<div class="column left">
    <div class="logo">
        <h1>
        <a href="http://www.baidu.com" title="百度搜索">百度</a>
        </h1>
    </div>
</div>
<div class="column right">
<p>圣杯布局 圣杯布局 圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局  圣杯布局 圣杯布局</p>
</div>
</div>
</body>
</html>